<template>
     <div class="wrapBox gray_page">
        <!--展示信息-->
        <div class="showMessage">
         <h2 @click="getName()">{{dealerList.dealerName}}</h2>
        <p>申请成为时代意见领袖同时成为福田会员，推荐好友来我店购车，得现金大礼！</p>
        </div>
        <!--填写信息-->
        <div class="compileMessage">
            <h5>填写信息</h5>
            <div class="on">
               <div class="messList">
                    <p><span><img src="@/assets/mem.png"></span>用户名</p>
                    <p><input class="getCode" type="text" @blur="submit(0)" placeholder="用户名" v-model="memList.userName"></p>
                </div>
                <div class="messList">
                    <p><span><img src="@/assets/phone.png"></span>手机号码</p>
                    <p><input type="text" v-model="userTel" @blur="handleUserTel" placeholder="请输入手机号码" maxlength="11"></p>
                </div>
                <div class="messList" v-if="type === 1 && notVip">
                    <p><span><img src="@/assets/verificationcode.png"></span>验证码</p>
                    <p><b class="btnCode"  @click="getAuth()" v-if="sendAuthCode">获取验证码</b>
                    <b class="btnCode" v-else>重新发送({{authTime}})</b>
                    <input class="getCode" type="text" v-model="userVerify"  @blur= "handleVerify" placeholder="请输入验证码" maxlength="6"></p>
                </div>
                <!-- <div class="messList" v-if="!notVip">
                    <p><span><img src="@/assets/mem.png"></span>用户名</p>
                    <p><input class="getCode" type="text" placeholder="用户名" v-model="memList.userName"></p>
                </div> -->
                <div class="messList">
                    <p><span><img src="@/assets/car.png"></span>是否有车</p>
                    <p><select @change="choiceCar()" v-model="isCar">
                        <option value="have">有车</option>
                        <option value="nohave">无车</option>
                    </select> <span class="select_icon"></span>
                    </p>
                </div>
                <transition name="fade">
                <div v-if="haveCar">
                    <div class="messList">
                        <p><span>*</span>VIN号(后八位)</p>
                        <p><input type="text" placeholder="请输入VIN号" v-model='vin' @blur='sendVin(vin)' maxlength="8"></p>
                    </div>
                    <div class="messList">
                        <p><span>*</span>品牌</p>
                        <p>
                        <select @change="getSeries(brands)" v-model="brands" v-if="!vinList.brand" >
                            <option v-for="item in brandList" :key="item.brandName" :value="item">{{item.brandName}}</option>
                        </select>
                        <input v-else type="text" placeholder="输入VIN后带出" v-bind:style="vinstyle" :disabled="flag" v-model='vinList.brand'><span class="select_icon"></span>
                        </p>
                    </div>
                    <div class="messList">
                        <p><span></span>车系</p>
                        <p>
                        <select class="aaa" v-if="!vinList.brandSeries" @change="chexi()" v-model="cheVal">
                            <option v-for="items in seriesList" :key="items.seriesName">{{items.seriesName}}</option>
                        </select>
                        <input v-else type="text" placeholder="输入VIN后带出" v-bind:style="vinstyle" :disabled="flag1" v-model='vinList.brandSeries'><span class="select_icon"></span>
                        </p>
                    </div>
                    <div class="messList">
                        <p><span>*</span>发动机号</p>
                        <p><input type="text" placeholder="输入VIN后带出" v-bind:style="vinstyle" v-model='vinList.engineNO' :disabled="flag2"></p>
                    </div>
                    <div class="messList">
                        <p><span></span>车牌号</p>
                        <p>
                        <b class="btnCode sole" v-if="showFont"><select class="color" v-model="checkCarBrand"><option v-for="item in carList" :key="item">{{item}}</option></select><span class="bg"></span></b>
                        <input class="getCode" type="text" placeholder="请输入车牌" v-bind:style="vinstyle" :disabled="flag3" v-model='vinList.vehicleNo' maxlength="6">
                        </p>
                    </div>
                    <div class="messList">
                        <p><span></span>车牌颜色</p>
                        <p>
                            <select @change="choiceColor()" v-model="colorValue">
                                <option value="1">请选择</option>
                                <option value="01">黄色</option>
                                <option value="02">蓝色</option>
                                <option value="03">绿色</option>
                            </select>
                            <span class="select_icon"></span>
                        </p>
                    </div>
                    </div>
              </transition>
            </div>
        </div>
        <div class="empty_box"></div>
        <div class="btnSub" @click="submit(1)">提交</div>
        <div v-if="show">
            <div class="gray2" @click="closeGray">
            </div>
            <div class="white2">
                <div class="pic2"><img :src=" 'data:image/jpg;base64,' + imgByte" alt=""></div>
                <div class="code2">
                    <div class="yzm2">答案是</div>
                    <input v-model="answerData" type="text" @blur="answer()">
                </div>
                <button @click="getphone()" id="sureBtn">确定</button>
            </div>
        </div>
    </div>
</template>
<script>
import { getCarInfoByVin, getBrandInfo, getCarSeries, getAuthCode, getSmsCode, getRegMember, searchVip, getDealName } from '@/api/api'
import { Toast } from 'mint-ui'
// import { MessageBox } from 'mint-ui'
export default {
  name: '',
  data () {
    return {
      cheVal: '',
      showList: true,
      carList: [],
      vin: '',
      tspflag: '',
      vinList: [],
      showFont: true, // 判断是否需要选择车牌
      brandList: [],
      seriesList: [],
      brands: '',
      show: false, // 控制验证码弹窗
      imgKey: '',
      imgByte: '',
      imgValue: '',
      sendAuthCode: true, // 控制显示提示或者倒计时
      authTime: 60, // 倒计时
      userTel: '', // 用户手机号
      verificationCode: '', // 短信验证码
      userVerify: '', // 用户输入的验证码
      telTrue: false, // 手机号提交验证
      yzcode: false, // 验证码提交验证
      vinNmber: false, // vin提交验证
      memberflag: false,
      haveCar: true,
      isCar: 'have',
      answerData: '', // 图片验证码的答案
      chinese: '京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领',
      colorValue: '1',
      notVip: true, // 当是true时，不是会员,false时，是会员
      checkCarBrand: '京',
      // userList: [], // 如果是会员的话返回用户名
      isMember: '',
      memList: {
        userName: ''
      }, // 第二个经销商页面如果是会员的话返回的数据
      dealerList: [], // 经销商名字
      cutType: this.type,
      flag: false,
      flag1: false,
      flag2: false,
      flag3: false,
      vinstyle: {
        background: 'white'
      }
    }
  },
  props: ['type'],
  created () {
    this.getBrand()
    this.CarList = this.chinese
    // this.$route.query.a // 获取路由参数
    var param = location.href.split('?')[1] // 获取到当前url后面所有的参数
    let obj = {}
    param.split('&').forEach(function (item) {
      let newArr = item.split('=')
      obj[newArr[0]] = decodeURI(newArr[1])
    })
    this.jxsNum = obj.a // a是经销商编码，b是车系，c是会员id
    sessionStorage.setItem('members', obj.c)
    this.getName()
  },
  mounted () {
    this.carList = this.chinese.split('')
  },
  methods: {
    submit (sign) {
      if (!this.memList.userName) {
        Toast({
          message: '用户名不能为空'
        })
        return false
      }
      if (this.userTel === '') {
        Toast({
          message: '手机号不能为空'
        })
        return
      }
      if (!this.telTrue) {
        Toast({
          message: '请填写正确手机号'
        })
        return false
      }
      if (this.isCar === 'nohave') {
        this.vinNmber = true
      }
      if (this.cutType === 2) {
        this.memberflag = true
      } else {
        // if (!this.memberflag) {
        //   Toast({
        //     message: '请填写正确的验证码'
        //   })
        //   return false
        // }
      }
      if (!this.vinNmber) {
        Toast({
          message: '请填写正确VIN号'
        })
        return false
      }
      let query
      if (this.isCar === 'nohave') {
        query = {
          tel: this.userTel,
          smsCode: this.userVerify,
          type: this.type,
          ftCode: this.dealerList.dealerCode,
          isMember: this.isMember,
          memberId: this.memList.memberID,
          username: this.memList.userName
          // dealerCode: this.dealerList.dealerCode
        }
      } else if (this.isCar === 'have') {
        query = {
          tel: this.userTel,
          smsCode: this.userVerify,
          type: this.type,
          ftCode: this.dealerList.dealerCode,
          userName: this.memList.userNayme,
          vin: this.vin,
          vehicleBrandId: this.vinList.vehicleBrandId,
          subBrandId: this.vinList.subBrandId,
          vehicleFunction: this.vinList.vehicleFunction,
          vehicleSeries: this.vinList.vehicleSeries,
          brandSeries: this.vinList.brandSeries,
          engineNO: this.vinList.engineNO,
          salesDate: this.vinList.salesDate,
          carPlateColor: this.colorValue,
          isMember: this.isMember, // 是否是会员,0是，1不是
          // memberId: this.userList.memberID || '',
          vehicleNo: this.vinList.vehicleNo || this.sendCarBrand,
          tspflag: this.vinList.tspflag,
          username: this.memList.userName,
          memberId: this.memList.memberID
          // dealerCode: this.dealerList.dealerCode

        }
      }
      if (sign === 1) {
        getRegMember(query).then(res => {
          if (res.code < 0) {
            Toast({
              message: res.msg
            })
            return false
          } else {
            this.$router.push({path: '/successinfo'})
          }
        })
      }
    },
    sendVin (item) {
      let params = {
        vin: this.vin,
        tspflag: this.tspflag
      }
      let reg = /^[0-9a-zA-Z]{8}$/
      if (this.vin === '') {
        Toast({
          message: 'vin号不能为空'
        })
        return false
      } else if (!reg.test(this.vin)) {
        Toast({
          message: 'vin格式不正确'
        })
        return false
      } else {
        this.vinNmber = true
      }
      getCarInfoByVin(params).then(res => {
        if (res.code < 0) {
          Toast({
            message: res.msg
          })
          this.vinNmber = false
          return
        }
        if (res.length < 1) {
          Toast({
            message: 'vin格式不正确'
          })
          this.vinNmber = false
          return
        }
        this.vinList = JSON.parse(res.data)
        if (this.vinList.vehicleNo) {
          this.showFont = false
        } else {
          this.showFont = true
          this.sendCarBrand = this.checkCarBrand + ' ' + this.vinList.vehicleNo
        }
        // 品牌车系发动机号为空
        if (this.vinList.brand === '') {
          this.flag = false
        } else {
          this.flag = true
        }
        if (this.vinList.brandSeries === '') {
          this.flag1 = false
        } else {
          this.flag1 = true
        }
        if (this.vinList.engineNO === '') {
          this.flag2 = false
        } else {
          this.flag2 = true
        }
        if (this.vinList.vehicleNo === '') {
          this.flag3 = false
        } else {
          this.flag3 = true
        }
      })
    },
    handleUserTel () {
      let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (this.userTel === '') {
        Toast({
          message: '手机号不能为空'
        })
      } else if (!reg.test(this.userTel)) {
        Toast({
          message: '手机号格式不正确'
        })
      } else {
        this.telTrue = true
      }
      if (this.type === 2) {
        let param = {
          telphone: this.userTel
        }
        searchVip(param).then(res => {
          if (res.code === 0) {
            this.isMember = 0
            this.memList = res.data
          } else {
            this.isMember = 1
          }
        })
      }
    },
    handleVerify () {
      let codeReg = /^\d{6}$/
      if (this.userVerify === '') {
        Toast({
          message: '验证码不能为空'
        })
      } else if (!codeReg.test(this.userVerify)) {
        Toast({
          message: '验证码格式不正确'
        })
      } else {
        this.yzcode = true
      }
      // else if (this.userVerify !== this.verificationCode) {
      //   Toast({
      //     message: '验证码输入错误'
      //   })
      // }
    },
    getBrand () {
      let params = {
        brandId: this.brandId
      }
      getBrandInfo(params).then(res => {
        this.brandList = JSON.parse(res.data)
      })
    },
    getSeries (item) {
      let params = {
        seriesName: item.seriesName,
        brand: item.brandId
      }
      getCarSeries(params).then(res => {
        this.seriesList = JSON.parse(res.data)
      })
    },
    chexi () {
      // console.log(this.cheVal) // 手动输入的车系
    },
    change () {
    //   console.log('选择了')
    },
    getAuth () {
      if (this.userTel === '') {
        Toast({
          message: '手机号不能为空'
        })
      }
      if (this.telTrue) {
        this.show = !this.show
        let params = {
          imgKey: this.imgKey,
          imgByte: this.imgByte
        }
        getAuthCode(params).then(res => {
          this.imgByte = res.imgByte
          this.imgKey = res.imgKey
        })
      }
    },
    getphone () {
      if (this.answerData === '') {
        Toast({
          message: '结果不能为空'
        })
        return
      }
      this.show = false
      let params = {
        imgKey: this.imgKey || '',
        imgValue: this.answerData || '',
        tel: this.userTel || ''
      }
      getSmsCode(params).then(res => {
        const that = this
        if (res.code === 0) {
          that.verificationCode = JSON.parse(res.data).smsCode
          this.notVip = true
          this.isMember = 1
          this.sendAuthCode = false
          this.authTime = 60 // 倒计时
          var authTimetimer = setInterval(() => {
            this.authTime--
            if (this.authTime <= 0) {
              this.sendAuthCode = true
              clearInterval(authTimetimer)
            }
          }, 1000)
        } else if (res.code === 2) {
          this.memList = res.data
          this.notVip = false
          this.isMember = 0
          this.memberflag = true
        } else {
          Toast({
            message: res.msg
          })
        }
      })
    },
    choiceCar () {
      if (this.isCar === 'nohave') {
        this.haveCar = false
      } else {
        this.haveCar = true
      }
    },
    answer () {

    },
    choiceColor () {
      // console.log(this.colorValue)
    },
    closeGray () {
      // 点击其他区域关闭弹窗
      this.show = false
    },
    getName () {
      let params = {
        dealerCode: this.jxsNum
      }
      getDealName(params).then(res => {
        this.dealerList = res.data
      })
    }
  }
}
</script>
<style scoped>
/*---展示信息---*/
.showMessage {
    width: 100%;
    height: 243px;
    background: url("../assets/bluebg.jpg") center no-repeat;
    background-size: 100% 100%;
    padding:54px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.showMessage h2 {
    font-size: 31px;
    color: #FFF100;
    padding:3px 0;
}

.showMessage p {
    font-size: 28px;
    color: #fff;
    width: 531px;
    font-weight: normal;
    margin-top: 15px;
}
.mint-toast, .is-placemiddle{
    font-size:25px
}
/* ---填写信息---*/
.on {
    background: white;
    padding: 0 36px;
    box-sizing: border-box;
    margin-bottom: 5px;
}
.color{
    border:none;
    /* background:#EC6665; */
    color:white;
    outline:none;
    width:60px;
    padding-left: 13px;
}
select{
    border:none;
    outline:none;
    -webkit-appearance:none;
    background:none;
}
.select_icon{
  width:25px !important;
  height:25px !important;
  background: url("../assets/select.png") no-repeat scroll right center;
  background-size:80%;
}
.bg{
  width:25px !important;
  height:25px !important;
  background: #EC6665 url("../assets/bg_white.png") no-repeat scroll right center;
  background-size:80%;
  /* padding:0 0 30px; */
}
.gray2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
}
.white2{
    position: absolute;
    top: 38%;
    left: 10%;
    width: 80%;
    background: white;
    text-align: center;
    padding: 10px 0px;
}
.pic2{
    width:80%;
    margin: 20px auto;
    height: 150px;
    border: solid 1px gainsboro;
}
.pic2 img{
    width:100%;
}

.code2{
    width:80%;
    margin: 0 auto;
    text-align: left;
    display: flex;
}
.yzm2{
    width:30%;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
}
.code2 input{
    width:70%;
    height: 50px;
    border: solid 1px #000;
    border-radius:3px;
}
#sureBtn{
    width:80%;
    margin:20px auto;
    background: #0070E8;
    color:#fff;
    border:none;
    padding: 15px 0;
    font-size: 24px;
    border-radius: 3px;
}
select{
  font-size:28px;
}

</style>
